<template>
  <div v-loading="loading">
    <!-- 头部 -->
    <HeaderMode
      :ref="(el) => (headerRef = el)"
      :orderStatus="orderStatus"
      :detailInfo="detailInfo"
      @handlePlan="handlePlan"
    />
    <!-- 收货确认 -->
    <ConfirmMode
      v-if="orderStatus >= 4"
      :ref="(el) => (confirmRef = el)"
      @refresh="_CustomerPriceInfo"
    />
    <!-- 快递信息 -->
    <FastmailMode v-if="orderStatus >= 4" :ref="(el) => (fastmailRef = el)" />
    <!-- 卖方出库 -->
    <OutboundMode
      id="outboundModeId"
      v-if="orderStatus >= 3"
      :ref="(el) => (outboundRef = el)"
    />
    <!-- 卖方报价 -->
    <SellerMode
      id="sellerModeId"
      v-if="orderStatus >= 2"
      :orderStatus="orderStatus"
      :ref="(el) => (sellerRef = el)"
    />
    <!-- 采购基础信息 -->
    <BaseMode id="baseModeId" :ref="(el) => (baseModeRef = el)" />
  </div>
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'OrderTrackDateil',
  })
  /**
   * @import
   */
  import HeaderMode from './components/HeaderMode.vue'
  import ConfirmMode from './components/ConfirmMode.vue'
  import FastmailMode from './components/FastmailMode.vue'
  import SellerMode from './components/SellerMode.vue'
  import OutboundMode from './components/OutboundMode.vue'
  import BaseMode from './components/BaseMode.vue'
  import { customerOrderInfo } from '~/src/api/dms/customerOrder'
  import { IsValueHave } from '~/src/utils/utils'
  /**
   * @var
   */
  // 全局吐司
  const proxy: any = getCurrentInstance()?.proxy
  const router = useRouter()
  const route = useRoute()
  const { order_no } = route.query

  const headerRef = ref()
  const confirmRef = ref()
  const fastmailRef = ref()
  const sellerRef = ref()
  const outboundRef = ref()
  const baseModeRef = ref()

  let detailInfo = reactive<any>({})
  const orderStatus = ref(1)
  const loading = ref(false)

  /**
   * @method
   */

  //跳转指定位置
  const handlePlan = (i: number) => {
    let elClass = ''

    if (i == 1) elClass = 'baseModeId'
    if (i == 2) elClass = 'sellerModeId'
    if (i == 3) elClass = 'outboundModeId'

    document
      .getElementById(elClass)
      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }

  // 获取订单详情
  const _CustomerPriceInfo = async () => {
    loading.value = true

    try {
      const res = await customerOrderInfo({ order_no })

      headerRef.value.getUpdateData(res.data)
      baseModeRef.value.getUpdateData(res.data)

      const { order_status, trans_info, stock_out_info } = res.data
      // order_status 为后端定义状态 orderStatus为前端流程图自定义状态

      if (order_status >= 120) orderStatus.value = 2
      if (IsValueHave(stock_out_info.list)) orderStatus.value = 3
      if (IsValueHave(trans_info.list)) orderStatus.value = 5

      nextTick(() => {
        // 卖方报价
        if (orderStatus.value >= 2) sellerRef.value.getUpdateData(res.data)
        // 卖方出库
        if (orderStatus.value >= 3) outboundRef.value.getUpdateData(res.data)
        // 快递运输
        if (orderStatus.value >= 4) fastmailRef.value.getUpdateData(res.data)
        // 收货确认
        if (orderStatus.value >= 4) confirmRef.value.getUpdateData(res.data)
      })

      setTimeout(() => {
        loading.value = false
      }, 500)
    } catch (error) {
      loading.value = false
    }
  }

  onMounted(() => {
    _CustomerPriceInfo()
  })
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
